<template>
  <div class="b-page-header flex items-center justify-between">
    <div class="inline-flex items-center">
      <img v-if="url.type !== 'icon'||url.type === 'img'"
           height="23"
           :src="url.data">
      <span v-else
            :class="url.data"></span>

      <span v-if="name"
            class="b-page-header-name">{{name}}</span>

      <ViewLinkedInfo v-if="isLinked"
                      :linkKey="name"
                      class="b-page-header-linked" />

    </div>

    <div class="flex items-center">
      <slot name="action"></slot>

      <el-dropdown placement="bottom-start"
                   class="view-dropdown"
                   size="small"
                   @command="command"
                   v-if="isView">
        <div class="cursor-pointer view-dropdown-current inline-flex items-center justify-around">
          <span :class="current === 'List'? 'cuifont icon_list' : 'cuifont icon_table'"></span>
          <span>{{current}}</span>
          <span class="view-dropdown-current--down cuifont icon_chevron_down"
                style="transform: scale(0.5)"></span>
        </div>
        <el-dropdown-menu slot="dropdown"
                          class="view-dropdown-menu">
          <el-dropdown-item v-for="item in options"
                            :key="item.value"
                            :class="['view-dropdown-menu-item flex items-center',{
                              'view-dropdown-menu-item--active': item.value === current
                            }]"
                            :command="item.value">
            <span :class="item.icon"></span>
            <span>{{item.label}}</span>
            <span class="cuifont icon_checkmark view-dropdown-menu-item--check"></span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <router-link class="request-content inline-flex items-center"
                   v-if="request"
                   :to="{name:'mspbots-client-desired-index'}">
        <span class="request-content-icon"></span>
        <span>{{request}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import { split } from 'lodash'

export default {
  name: 'BPageHeader',
  props: {
    value: {
      type: String,
      default: 'List'
    },
    name: String,
    icon: String,
    isView: {
      type: Boolean,
      default: true
    },
    isLinked: {
      type: Boolean,
      default: true
    },
    request: String
  },
  data () {
    return {
      options: [
        { label: 'Grid', value: 'Grid', icon: 'cuifont icon_table' },
        { label: 'List', value: 'List', icon: 'cuifont icon_list' }
      ]
    }
  },
  computed: {
    url () {
      const [name, suffix] = split(this.icon, '|')

      if (!suffix || suffix === 'icon') {
        return {
          type: 'icon',
          data: name
        }
      }
      if (!suffix || suffix === 'img') {
        return {
          type: 'img',
          data: require(`@/${name}.png`)
        }
      }

      return {
        type: suffix,
        data: `${this.$ossLink}/app/view_pageheader/${name}.${suffix}`
      }
    },
    current: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    command (val) {
      this.current = val
      this.$emit('change', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.b-page-header {
  height: 48px;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 4px;
  margin-bottom: 12px;

  &-name {
    margin-left: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #404040;
  }
}

.view-dropdown {
  margin-left: 20px;
  &-current {
    border-radius: 2px;
    width: 105px;
    height: 30px;
    span {
      font-size: 14px;
    }

    &:hover {
      color: $--theme-color;
      background-color: $--theme-color-background;
    }
  }
}

.request-content {
  width: 230px;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  background-image: url("#{$--ossLink}/app/view_pageheader/dataset_bg.png");
  background-size: 230px 30px;
  margin-left: 20px;
  text-decoration: none;

  &-icon {
    background-image: url("#{$--ossLink}/app/view_pageheader/rightlink_icon.png");
    width: 30px;
    height: 30px;
    background-size: 30px;
    margin-right: 10px;
  }

  span {
    white-space: nowrap;
    font-weight: 600;
    color: #ffffff;
    line-height: 20px;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0px 2px 6px 0px #b8caea;
  }
}
</style>

<style lang="scss">
.view-dropdown-menu {
  width: 205px;
  &-item {
    height: 40px;
    font-size: 14px;
    padding: 0 10px;

    span {
      font-size: 14px;

      &:nth-of-type(1) {
        margin-right: 5px;
      }

      &:nth-of-type(3) {
        flex: 1;
        text-align: right;
        visibility: hidden;
      }
    }

    &--active {
      color: #17b3a3;
      span:nth-of-type(3) {
        visibility: visible;
      }
    }
  }
}
</style>